Query Driven Mp3 Speler in Macromedia Director

door de toename van free software en de gevorderde staat van shared libraries ontstaat er steeds meer ruimte voor kleine programmaatjes met erg specifieke functie

Als perfect voorbeeld hierbij wil ik Quicksilver aanhalen, een macintosh programmaatje met een erg inuitieve en slimme interface. Het is een soort van 'Run-Box' (Windowstoets + R) die met je meedenkt.

Intuitief wil zeggen begrijpen zonder aangeleerd te zijn. Hoewel de huidige trend is om met iconen te werken moet de gebruiker altijd eventjes over het icoon hoveren om middels de tooltip aangeleerd te krijgen waar het icoon voor staat. Dit is dus snel, maar niet zo intuitief.

Quicksilver presenteerd je met een runbox waar je met een paar letters in te toetsen van wat je wilt doen genoeg hebt om een taak te ondernemen. De box is slim genoeg om te zien dat de 2 letters uf aangeven dat je de website http://userfriendly.org wilt bezoeken. dit door te kijken naar de meest gebruikte commando's, preferences en history files

Naar dit model wil ik een mp3 speler bouwen, een mp3 speler die snapt welke files je hebt staan en met een simpele term gfenoeg heeft om een playlist samen te stellen

We willen een mp3 speler die zowel via het internet als locaal te gebruiken is en die met minder acties te gebruiken is als huidige alternatieven

Een gebruiker vult een gedeelte van een keyword in, drukt enter en hoort muziek
Als de gebruiker op 'next' klikt of het liedje afgelopen is wordt het volgende nummer ingeladen en zo verder
Na het laatste nummer begint de player weer bij nummer een en zo in een eindeloze loop

.... lets fire up director and start codin'....

functieverdeling

1. mp3s afspelen, pauseren en stoppen,
2. communiceren met een extern programma om de locatie van de af te spelen file te verkrijgen

Omdat je toch eerst een filenaam nodig hebt om af te spelen lijkt het me logisch met deze functie te beginnen, communicatie met de server

Voor debugging purposes kan het handig zijn om ipv met scripts, met tekstfiles te werken waarin de output van het scriptje staat, zo heb je automatisch een gecontroleerde testomgeving waarmee het makkelijker te zien is of je output daadwerkelijk de input matchtte
Live data kan bij het testen voor rare gevolgtrekkingen zorgen, schele hoofdpijn en vele uren vergeefs een niet bestaand probleem debuggen tot gevolg hebben, we beginnen dan ook met: scriptje.txt
maak een tekstfile aan naast de toekomstige director movie en zet daarin de volledige URI naar een bestaand mp3'tje , deze mag zich zowel on als offline bevinden, eg:

scriptje.txt
file:///e:/mp3/bizet/Bizet%20-%20Carmen%20-%20Les%20voicis%20le%20quadrille.mp3

rest het dit text filetje neer te zetten op een webserver
bij deze voorbeelden hebben we de apachebuilt voor win32 op localhost draaien; zodat de search url die we gebruiken http://localhost/scriptje.txt

De invoer wordt door het script vergeleken met de bij het scriptje bekende bestand- en foldernamen
als er een match wordt gemaakt zet het scriptje het bestand mee in een playlist en slaat hem dan voor verder gebruik op
Per Client is er maximaal één playlist op de server aanwezig; zolang je clientID en/of je query hetzelfde blijven zal er dus geen nieuwe playlist gemaakt worden

de gebruiker krijgt behalve een searchbox ook een knop om verder te kunnen zappen
misschien dat later een click-and-hold event kan ingebouwd worden om een contextmenuutje te genereren waarmee je gelijk naar nummer 312 kan springen ipv letterlijk 312 keer next te clicken

Communicatie

laten we proberen director bovenstaand test scriptje in te laten lezen en er iets mee te laten doen;

We maken in director een nieuwe movie aan en zetten er een invoerveld in klaar
Geef 'queryfield' als naam voor het invoerveld

We moeten 2 dingen naar het scriptje doorsturen;

1. wie dat we zijn, wat is ons clientID
2. de query die we zoeken

In Director kan je op verschillende wijze met het netwerk spelen, Ik opteer hier voor postNetText, een functie waarmee je een associative array (list) kunt sturen naar een script via de post methode (bij POST wordt de userinput/formvariables naar STDIN van de cgi geschreven, bij GET achter het vraagteken in de URI gestopt
Beiden hebben hun affecionados en extreem militante afsplitsingen dus pak er gerust eentje die het lekkerste aanvoelt, meestal wijst de situatie zichzelf wel uit want het aantal chars binnen een url is beperkt, als je lange waarden wilt doorsturen is het vrijwel altijd aangewezen dit met POST te doen

Zet onder queryfield een knop, hoewel vaak overbodig is het handig om tijdens development bepaalde 'shortcuts' overeind te hebben als er plots iets snel getest / veranderd moet worden
We beginnen met het Script van deze laatst geplaatste; de knop die de communicatie in werking zal stellen (4 now)

01  global gNetId    -- global network op id, is there a 
                     -- network operation in progress; 
02  on mouseUp me    
03    sendlist = ["query":member("queryfield").text, "clientID":"123"]
04    gNetId = postNetText("http://127.0.0.1/scriptje.txt", sendlist);
05  end

Het lastige aan net-werken is dat het zo asynchroon is; op het moment dat jou programma op response van de server zit te wachten wil je als gebruiker niet in een programmaloop komen te zitten die vastgelopen lijkt te zijn;je programma moet ten alle tijden responsive zijn

we lossen dit op door het filmpje hetzelfde frame te laten herhalen waarbij op het allerlaatste moment (exitFrame) de player wordt verteld naar hetzelfde frame (the frame) te gaan
Dan wordt er snel gechecked of de netwerk transfer ondertussen klaar is, zonet go to self,...;

Framescript van frame 1

01  global gNetId
02  on exitFrame me
03    if (netDone(gNetId) = TRUE) and (netError(gNetId) = "OK") then
04      put netTextResult()
05    end if
06    go the frame
07  end

oftewel in het Nederlands:

op het einde van dit frame check je of netwerkoperatie nummer 'gNetId ' klaar is en mocht hij klaar zijn of hij ook daadwerkelijk geslaagd is
indien beiden ja zijn laat je het resultaat zien
run jezelf nogmaals ( go the frame seems hard to translate ;)

ondertussen kan je bij dit scriptje al aardig wat waarnemen als je het runt, er wordt iets verstuurd en de server spuugt idd een url terug die wordt weergegeven in het output venster
verder wordt deze url in een shockwave object gestopt en naar de browser verstuurd de director movies vind je hier